<template>
  <div >
    <div v-html="content" :class="{'folding-content':isFolding}"></div>
    <div class="button"  @click="toggleFolding" v-if="isFolding">阅读全文 <i class="el-icon-arrow-down"></i></div>
    <div class="button" @click="toggleFolding" v-else>收起 <i class="el-icon-arrow-up"></i></div>
  </div>
</template>

<script>
export default {
  props:['content'],
  name: 'Folding',
  data(){
    return{
      isFolding:true
    }
  },
  methods:{
    toggleFolding(){
      this.isFolding=!this.isFolding
    }
  }
};
</script>

<style scoped lang="less">
.folding-content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */

  -webkit-line-clamp: 4; /* 控制最多显示几行 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  &:hover{
    color: #666;
  }
}
.button{
  color: #175199;
  margin:5px 10px;
  cursor: pointer;
  text-align: right;
  font-size: 15px;
  &:hover{
    color: #666;
  }
}
</style>
